<template>
  <div class="collapse" @click="onClick">
    <div class="collapse-indent" :style="`paddingLeft: ${row.levels * 20}px`"></div>
    <div class="collapse-arrow" v-if="row.showArrow && row.resourceType === 1" :style="[rotate]">
      <Icon type="ios-arrow-forward"/>
    </div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "collapseArrow",
    data() {
      return {
        show: false,
      }
    },
    props: {
      index: {
        type: [Number,String],
        default: 0
      },
      row: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    computed: {
      rotate() {
        let style = {
          transition: 'all .5s'
        };
        if (this.row.expand) {
          style.transform = 'rotate(90deg)'
        } else style.transform = 'rotate(0)'
        return style;
      }
    },
    methods: {
      onClick() {
        this.$emit('onClick',this.row,this.index);
      }
    }
  }
</script>

<style scoped lang="less">
  .collapse {
    min-width: 200px;
    min-height: 48px;
    display: flex;
    align-items: center;

    &-arrow {
      margin-right: 5px;
    }
  }
</style>
